// import React, { Component } from 'react'
import React, { Component } from 'react'
import '../App.css'
import {
    SearchOutlined,
    DownOutlined
} from '@ant-design/icons';
import axios from '../utils/request'
import { PullRefresh } from 'react-vant';
import { Tabs, Carousel } from 'antd';
import debounce from '../utils/debounce'
const { TabPane } = Tabs;
function callback(key) {
    console.log(key);
}
const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};

const onRefresh = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, 1000);
    });
};

export default class Popularization extends Component {
    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }

    search = (value) => {
        debounce(() => {
            axios({
                url: '/search',
                method: 'post',
                data: {
                    value: value
                }
            }).then(res => {
                console.log(res);
                this.setState({
                    list: res.data.data
                })
            })
        }, 1000)

    }

    chat(id) {
        this.props.history.push(`/detail_chat/` + id)
    }

    render() {
        const { list } = this.state
        return (
            <div className='popular'>
                <div className='popular_header'>
                    <div className="input">
                        <div className='icon'>
                            <SearchOutlined />
                        </div>
                        &emsp;<input placeholder="输入关键字搜索科普文章" onChange={(e) => this.search(e.target.value)}></input>
                    </div>
                </div>
                <div className='popular_main'>
                    <Tabs defaultActiveKey="1" onChange={callback}>
                        <TabPane tab="热点" key="1">
                            <PullRefresh onRefresh={onRefresh}>
                                <div className="hot">
                                    <div className='swiper_2'>
                                        <Carousel autoplay>

                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=4010794666,1105866046&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3153841751,2626550879&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3807908422,801930145&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2939374391,560439438&fm=26&fmt=auto"></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='main_one'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.img}></img>
                                                    <div>                                                        <li>{item.sold}</li>
                                                        <li><span>生活</span>&emsp;<span>{item.time}</span>&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>
                                </div>
                                <div className='hot'>

                                </div>
                            </PullRefresh>

                        </TabPane>
                        &emsp;
                        <TabPane tab="话题" key="2">
                            <PullRefresh onRefresh={onRefresh}>
                                <div className='topic'>
                                    <div className='topic_one'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div className='topic_two' key={index}>
                                                    <div className='topic_two_1'>
                                                        <img src={item.img1} onClick={() => this.chat(item.id)}></img>
                                                        <div>
                                                            <li><span>{item.name}</span>&emsp;<span className='span_1'>{item.solp}</span>&emsp;<span className='span_1'>{item.slie}</span></li>
                                                            <li><span className='span_3'>原创</span>&emsp;<span className="span_2">{item.time}</span></li>
                                                        </div>
                                                    </div>
                                                    <div className='topic_two_2'>
                                                        <li>{item.skin}</li>
                                                        <li>{item.cope}</li>
                                                    </div>
                                                </div>
                                            })
                                        }
                                    </div>
                                </div>
                            </PullRefresh>
                        </TabPane>
                        <TabPane tab="生活" key="3">
                            <PullRefresh onRefresh={onRefresh}>
                                <div className='live'>
                                    <div className='swiper_1'>
                                        <Carousel autoplay className='swper_11'>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2046989609,2768319854&fm=15&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1345245476,1652679147&fm=15&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1758296826,2533096117&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=3678808351,2109218424&fm=15&fmt=auto"></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='swiper_29'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.imge}></img>
                                                    <div>
                                                        <li>{item.sold}</li>
                                                        <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>
                                </div>
                            </PullRefresh>
                        </TabPane>
                        <TabPane tab="睡眠" key="4">
                            <PullRefresh onRefresh={onRefresh}>
                                <div className='sleep'>
                                    <div className='swiper_2'>
                                        <Carousel autoplay className='swper'>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=54030807,2778197224&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1197343961,837530837&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=568172784,1390317145&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=2156298067,920669920&fm=26&fmt=auto"></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='swiper_21'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.imgs}></img>
                                                    <div>
                                                        <li>{item.sold}</li>
                                                        <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>
                                </div>
                            </PullRefresh>
                        </TabPane>
                        <TabPane tab="女性" key="5">
                            <PullRefresh onRefresh={onRefresh}>
                                <div className='man'>
                                    <div className='swiper_2'>
                                        <Carousel autoplay className='swper'>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=674730176,555615540&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=673105166,2462152400&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=676050537,5695262&fm=26&fmt=auto"></img></h3>
                                            </div>
                                            <div>
                                                <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=837308367,2168893871&fm=15&fmt=auto"></img></h3>
                                            </div>
                                        </Carousel>
                                    </div>
                                    <div className='swiper_26'>
                                        {
                                            list.length && list.map((item, index) => {
                                                return <div key={index} className='time'>

                                                    <img src={item.image}></img>
                                                    <div>
                                                        <li>{item.sold}</li>
                                                        <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                                    </div>
                                                </div>

                                            })
                                        }
                                    </div>

                                </div>
                            </PullRefresh>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}



// export default function Popularization(props) {
//     let [list, setData] = useState([])
//     useEffect(async () => {
//         let res = await axios.post('/getlist')
//         setData(res.data.data)
//         console.log(res);
//     }, [])
//     return (
//         <div className='popular'>
//             <div className='popular_header'>
//                 <div className="input">
//                     <div className='icon'>
//                         <SearchOutlined />
//                     </div>
//                     <input placeholder="输入关键字搜索科普文章" onChange={(e) => this.search(e.target.value)}></input>
//                 </div>
//             </div>
//             <div className='popular_main'>
//                 <Tabs defaultActiveKey="1" onChange={callback}>
//                     <TabPane tab="热点" key="1">
//                         <div className="hot">
//                             <div className='swiper_2'>
//                                 <Carousel autoplay>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=4010794666,1105866046&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3153841751,2626550879&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3807908422,801930145&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2939374391,560439438&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                 </Carousel>
//                             </div>
//                             <div className='main_one'>
//                                 {
//                                     list.length && list.map((item, index) => {
//                                         return <div key={index} className='time'>

//                                             <img src={item.img}></img>
//                                             <div>                                                        <li>{item.sold}</li>
//                                                 <li><span>生活</span>&emsp;<span>{item.time}</span>&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
//                                             </div>
//                                         </div>

//                                     })
//                                 }
//                             </div>
//                         </div>
//                         <div className='hot'>

//                         </div>
//                     </TabPane>
//                          &emsp;
//                         <TabPane tab="话题" key="2">
//                         <div className='topic'>
//                             <div className='topic_one'>
//                                 {
//                                     list.length && list.map((item, index) => {
//                                         return <div className='topic_two' key={index}>
//                                             <div className='topic_two_1'>
//                                                 <img src={item.img1}></img>
//                                                 <div>
//                                                     <li><span>{item.name}</span>&emsp;<span className='span_1'>{item.solp}</span>&emsp;<span className='span_1'>{item.slie}</span></li>
//                                                     <li><span className='span_3'>原创</span>&emsp;<span className="span_2">{item.time}</span></li>
//                                                 </div>                                               </div>
//                                             <div className='topic_two_2'>
//                                                 <li>{item.skin}</li>
//                                                 <li>{item.cope}</li>
//                                             </div>
//                                         </div>
//                                     })
//                                 }
//                             </div>
//                         </div>
//                     </TabPane>
//                     <TabPane tab="生活" key="3">
//                         <div className='live'>
//                             <div className='swiper_1'>
//                                 <Carousel autoplay className='swper_11'>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2046989609,2768319854&fm=15&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1345245476,1652679147&fm=15&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1758296826,2533096117&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=3678808351,2109218424&fm=15&fmt=auto"></img></h3>
//                                     </div>
//                                 </Carousel>
//                             </div>
//                             <div className='swiper_29'>
//                                 {
//                                     list.length && list.map((item, index) => {
//                                         return <div key={index} className='time'>

//                                             <img src={item.imge}></img>
//                                             <div>
//                                                 <li>{item.sold}</li>
//                                                 <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
//                                             </div>
//                                         </div>

//                                     })
//                                 }
//                             </div>
//                         </div>
//                     </TabPane>
//                     <TabPane tab="睡眠" key="4">
//                         <div className='sleep'>
//                             <div className='swiper_2'>
//                                 <Carousel autoplay className='swper'>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=54030807,2778197224&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1197343961,837530837&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=568172784,1390317145&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=2156298067,920669920&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                 </Carousel>
//                             </div>
//                             <div className='swiper_21'>
//                                 {
//                                     list.length && list.map((item, index) => {
//                                         return <div key={index} className='time'>

//                                             <img src={item.imgs}></img>
//                                             <div>
//                                                 <li>{item.sold}</li>
//                                                 <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
//                                             </div>
//                                         </div>

//                                     })
//                                 }
//                             </div>
//                         </div>
//                     </TabPane>
//                     <TabPane tab="女性" key="5">
//                         <div className='man'>
//                             <div className='swiper_2'>
//                                 <Carousel autoplay className='swper'>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=674730176,555615540&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=673105166,2462152400&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=676050537,5695262&fm=26&fmt=auto"></img></h3>
//                                     </div>
//                                     <div>
//                                         <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=837308367,2168893871&fm=15&fmt=auto"></img></h3>
//                                     </div>
//                                 </Carousel>
//                             </div>
//                             <div className='swiper_26'>
//                                 {
//                                     list.length && list.map((item, index) => {
//                                         return <div key={index} className='time'>

//                                             <img src={item.image}></img>
//                                             <div>
//                                                 <li>{item.sold}</li>
//                                                 <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
//                                             </div>
//                                         </div>

//                                     })
//                                 }
//                             </div>

//                         </div>
//                     </TabPane>
//                 </Tabs>
//             </div>
//         </div>
//     )
// }
